




<template>
  <div class="personal-info-container">
    <!-- 头部区域 -->
    <div class="header">
      <h2 class="title">个人信息</h2>
      <el-button
          type="primary"
          icon="el-icon-edit"
          @click="showEditModal = true"
          class="edit-button"
      >
        修改信息
      </el-button>
    </div>

    <!-- 信息展示区域 -->
    <div class="info-content">
      <el-card shadow="hover" class="info-card">
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">姓名：</span>
            <span class="info-value">{{ user.realName || '未填写' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">用户名：</span>
            <span class="info-value">{{ user.username }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">手机号：</span>
            <span class="info-value">{{ user.phone || '未填写' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">邮箱：</span>
            <span class="info-value">{{ user.email || '未填写' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">角色：</span>
            <el-tag :type="getRoleTagType(user.role)">
              {{ roleMap[user.role] }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 底部操作区域 -->
    <div class="action-area">
      <el-popover
          placement="top-end"
          title="当前分配规则"
          width="300"
          trigger="click"
      >
        <div v-if="rule" class="rule-detail">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="预留成本">{{ rule.reserve }}%</el-descriptions-item>
            <el-descriptions-item label="管理员分红">{{ rule.admin }}%</el-descriptions-item>
            <el-descriptions-item label="投资者分红">{{ rule.investor }}%</el-descriptions-item>
            <el-descriptions-item label="农户分红">{{ rule.farmer }}%</el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-else class="loading-text">
          <i class="el-icon-loading"></i> 加载中...
        </div>
        <el-button
            slot="reference"
            type="info"
            icon="el-icon-s-operation"
            plain
        >
          分配规则
        </el-button>
      </el-popover>

      <el-button
          type="warning"
          icon="el-icon-warning-outline"
          plain
          @click="showFeedbackDialog"
      >
        问题反馈
      </el-button>
    </div>

    <!-- 编辑信息弹窗 -->
    <el-dialog
        title="编辑个人信息"
        :visible.sync="showEditModal"
        width="500px"
        :close-on-click-modal="false"
    >
      <el-form label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="user.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="user.realName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="原密码">
          <el-input
              v-model="user.passwordHash"
              type="password"
              placeholder="请输入当前密码"
              show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input
              v-model="rePass"
              type="password"
              placeholder="如不修改请留空"
              show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="user.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showEditModal = false">取 消</el-button>
        <el-button
            type="primary"
            @click="saveChanges"
            :loading="saving"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserApi, updateUserInfoApi } from "@/api/users";
import { getRuleInfoApi } from "@/api/distribution";
import {addContentApi} from "@/api/feedback";

export default {
  name: "UserInfoView",
  data() {
    return {
      user: {
        userId:'',
        username: '',
        passwordHash: '',
        realName: '',
        phone: '',
        email: '',
        role: ''
      },
      feedback:{
        userId:'',
        content:''
      },
      showEditModal: false,
      saving: false,
      rePass: '',
      roleMap: {
        admin: '管理员',
        farmer: '农户',
        investor: '投资者',
        auditor: '审计员'
      },
      rule: null
    }
  },
  methods: {
    getUser() {
      const username = sessionStorage.getItem("username");
      getUserApi(username).then(res => {
        this.user = res.data;
      });
    },
    saveChanges() {
      this.saving = true;
      if (this.rePass) {
        this.user.passwordHash = this.rePass;
      }
      updateUserInfoApi(this.user)
          .then(() => {
            this.$message.success('信息更新成功');
            this.showEditModal = false;
            this.getUser();
          })
          .finally(() => {
            this.saving = false;
          });
    },
    getRuleInfo() {
      getRuleInfoApi().then(res => {
        this.rule = res.data;
      });
    },
    getRoleTagType(role) {
      const types = {
        admin: 'danger',
        farmer: 'success',
        investor: 'warning',
        auditor: 'info'
      };
      return types[role] || '';
    },
    showFeedbackDialog() {
      this.$prompt('请描述您遇到的问题', '问题反馈', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputValidator: (value) => {
          if (!value || value.trim().length < 10) {
            return '请至少输入10个字符描述问题';
          }
        }
      }).then(({ value }) => {
        this.submitFeedback(value);
      }).catch(() => {
        this.$message.info('已取消反馈');
      });
    },
    async submitFeedback(value) {
      // 这里添加提交反馈的逻辑
      this.feedback.content = value
      this.feedback.userId = this.user.userId
      await addContentApi(this.feedback)
      this.$message.success('反馈已提交，我们会尽快处理！');

    }
  },
  created() {
    this.getUser();
    this.getRuleInfo();
  }
};
</script>

<style scoped>
.personal-info-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.title {
  color: #303133;
  font-size: 20px;
  margin: 0;
}

.info-content {
  margin-bottom: 30px;
}

.info-card {
  border: none;
  box-shadow: none;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.info-label {
  font-weight: 500;
  color: #909399;
  width: 80px;
}

.info-value {
  color: #606266;
  flex: 1;
}

.action-area {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.rule-detail {
  padding: 10px;
}

.loading-text {
  padding: 10px;
  text-align: center;
  color: #909399;
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .personal-info-container {
    padding: 15px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .edit-button {
    margin-top: 10px;
    width: 100%;
  }

  .action-area {
    flex-direction: column;
  }

  .action-area button {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>








